<template>
  <div class="myButtons">
    <div class="myButton" :style="{width:cwidth+'px',height:cwidth+'px'}">
      <div :style="{width:cwidth+'px',height:cwidth+'px'}">
        <svg viewBox="0 0 100 100" :style="{width:cwidth+'px',height:cwidth+'px'}">
          <path :d="trackPath" fill="none" stroke-width="5" stroke="#00a1d6" :style="circlePathStyle" stroke-linecap="round" />
        </svg>
      </div>
      <div class="progress_button">
        <button @mouseup="mouseUpGood" @mousedown="mouseDownGood" id="good" :style="{width:cwidth/1.5+'px',height:cwidth/1.5+'px',backgroundImage: 'url('+(checkFirst?hoverImg1:img1)+')'}"></button>
      </div>
    </div>
    <div class="myButton" :style="{width:cwidth+'px',height:cwidth+'px'}">
      <div :style="{width:cwidth+'px',height:cwidth+'px'}">
        <svg viewBox="0 0 100 100" :style="{width:cwidth+'px',height:cwidth+'px'}">
          <path :d="trackPath" fill="none" stroke-width="5" stroke="#00a1d6" :style="circlePathStyle" stroke-linecap="round" />
        </svg>
      </div>
      <div class="progress_button">
        <button  @click="handleCollect" id="collect" :style="{width:cwidth/1.5+'px',height:cwidth/1.5+'px',backgroundImage: 'url('+(checkSecond?hoverImg2:img2)+')'}"></button>
      </div>
    </div>
    <div class="myButton" :style="{width:cwidth+'px',height:cwidth+'px'}">
      <div :style="{width:cwidth+'px',height:cwidth+'px'}">
        <svg viewBox="0 0 100 100" :style="{width:cwidth+'px',height:cwidth+'px'}">
          <path :d="trackPath" fill="none" stroke-width="5" stroke="#00a1d6" :style="circlePathStyle" stroke-linecap="round" />
        </svg>
      </div>
      <div class="progress_button">
        <button  @click="handleShare" id="share" :style="{width:cwidth/1.5+'px',height:cwidth/1.5+'px',backgroundImage: 'url('+(checkThird?hoverImg3:img3)+')'}"></button>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  data() {
    return {
      timer: '',
      percentage: -50,
      img1: require('../assets/good2.svg'),
      img2: require('../assets/collect2.svg'),
      img3: require('../assets/share2.svg'),
      hoverImg1: require('../assets/good.svg'),
      hoverImg2: require('../assets/collect.svg'),
      hoverImg3: require('../assets/share.svg'),
      checkFirst: false,
      checkSecond: false,
      checkThird: false,
    }
  },
  props:{
    cwidth:{
      type:Number,
      default:30,
    },
  },
  methods: {
    add(){
      if(this.percentage<100){
        this.percentage += 1;
      }
      else if(this.percentage===100){
        this.percentage=-50;
        this.handleGood();
        this.handleCollect();
        this.handleShare();
        clearInterval(this.timer);
      }
    },
    decline(){
      if(this.percentage>0){
        this.percentage -= 1;
      }
      else if(this.percentage===0){
        this.percentage = -50;
      }
      else{
        clearInterval(this.timer);
      }
    },
    handleGood() {
      this.checkFirst = !this.checkFirst;
      this.$emit("handleGood",'');
    },
    handleCollect() {
      this.checkSecond = !this.checkSecond;
      this.$emit("handleCollect",'');
    },
    handleShare() {
      this.checkThird = !this.checkThird;
      this.$emit("handleShare",'');
    },
    mouseDownGood() {
      this.percentage=-50;
      this.timer = setInterval(this.add, 15);
    },
    mouseUpGood() {
      clearInterval(this.timer);
      if(this.percentage>0 && this.percentage<100){
        this.timer = setInterval(this.decline,20);
      }
      else if(this.percentage>=-49){
        this.handleGood();
      }
    }
  },
  computed:{
    trackPath(){
      const radius = 50-5/2;
      return 'M 50 50 m 0 -'+radius+' a '+radius+' '+radius+' 0 1 1 0 '+radius*2+' a '+radius+' '+radius+' 0 1 1 0 -'+radius*2+' ' ;
    },
    perimeter(){
      const radius = 50-5/2;
      return 2*Math.PI*radius;
    },
    strokeOffset(){
      const p = this.perimeter;
      if(this.percentage<0) return p+'px';
      else {
        return (1 - this.percentage / 100) * p + 'px';
      }
    },
    circlePathStyle(){
      const perimeter = this.perimeter;
      return{
        strokeDasharray:''+perimeter+'px,'+perimeter+'px',
        strokeDashoffset:this.strokeOffset,
      }
    }
  }
}
</script>

<style scoped>
.myButtons {
  display: inline-block;
}
.myButton {
  display: inline-block;
  position: relative;
}
.progress_button {
  display: inline-block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  width: 100%;
}
button {
  border: none;
  outline: none;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-color: rgba(0,0,0,0);
}
#good{
  background-image: url("../assets/good2.svg");
}
#collect{
  background-image: url("../assets/collect2.svg");
}
#share{
  background-image: url("../assets/share2.svg");
}

</style>
